<template>
  <div class="Jiben">
    <el-row :gutter="20">
      <el-col :span="6"><span>ID：</span>ex{{ ID }}</el-col>
      <el-col :span="6"><span>姓名：</span>{{ name }}</el-col>
      <el-col :span="6"><span>等级：</span>{{ level }}</el-col>
      <el-col :span="6"><span>性别：</span>{{ age }}</el-col>
      <el-col :span="6"><span>职业：</span>{{ profession }}</el-col>
      <el-col :span="6"><span>武器：</span>{{ weapon }}</el-col>
      <el-col :span="6"><span>战车：</span>{{ chariot }}</el-col>
      <!-- <el-col :span="6">
        <el-popover
          placement="top-start"
          title="标题"
          width="200"
          trigger="hover"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
        >
          <span slot="reference">hover 激活</span>
        </el-popover>
      </el-col> -->
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"><span>距离下次升级：</span>
        <span style="color:black;font-size:16px">还剩：<span>{{ levelExp }}</span> 经验升级 | EXP:{{ EXP+levelExp }}</span>
        <exp :exp="EXP" :step="step" :levelexp="levelExp" :disabled="disabled" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import exp from '@/components/EXPecharts/index.vue'

export default {
  name: 'Jiben',
  components: {
    exp
  },
  data() {
    return {
      ID: '0001',
      name: '贺康康',
      level: 88,
      age: '男',
      profession: '战神',
      weapon: '庚伮金刚杵',
      chariot: '红狼',
      // 当前经验
      EXP: 160,
      // 每次增加多少经验
      step: 20,
      // 还剩多少经验升级
      levelExp: 50,
      disabled: true
    }
  }
}
</script>

<style lang="scss" scoped>
  .Jiben{
    span{
        color:rgb(64, 158, 255);
    }
  }
</style>
<style lang="scss">
  .Jiben{
    .el-row{
      .el-col{
        font-size: 24px;
        margin-bottom: 10px;
      }
    }
  }
</style>
